<template>
  <div class="inline-flex justify-center items-center cursor-pointer">
    <div class="avatar-comp" @click="handleClickAvatar">
      <el-avatar :src="user.avatar" :size="size">
        {{ getAvatarText }}
      </el-avatar>
    </div>

    <div class="z-10">
      <NcLoginDialog ref="login" />
      <NcEditDialog ref="edit" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import NcLoginDialog from './NcLoginDialog'
import NcEditDialog from './NcEditDialog'

export default {
  name: 'NcCompLoginAvatar',
  components: { NcEditDialog, NcLoginDialog },

  props: {
    size: {
      type: Number,
      default: 36,
    },
  },

  data() {
    return {
      defaultText: {
        zh: '登录',
        en: 'Login',
      },
    }
  },

  computed: {
    ...mapState(['user']),

    localeLang() {
      return this.$i18n.locale
    },

    getAvatarText() {
      if (this.user.avatar) return ''
      if (this.user.nickname && this.user.nickname.length > 0) {
        return this.user.nickname[0].toUpperCase()
      }
      return this.defaultText[this.localeLang]
    },
  },
  methods: {
    handleClickAvatar() {
      if (!this.user.hasLogined) {
        console.log('switch to show login dialog')
        this.$refs.login.handleOpen()
      } else {
        console.log('switch to show edit dialog')
        this.$refs.edit.handleOpen()
      }
    },
  },
}
</script>
